<template>
  <view class="record-search">
    <view class="search">
      <TSearch @confirm="handleConfirm" :placeholder="text"></TSearch>
    </view>
    <text
      class="ali-icon icon-shaixuan1"
      style="font-size: 40rpx; padding: 5rpx"
      @click="visible = true"
    ></text>
    <TuiDrawer :visible="visible" mode="bottom" @close="visible = false">
      <view class="filter-box">
        <view class="header">
          <text class="title">筛选条件</text>
          <text
            class="ali-icon icon-guanbi2"
            style="font-size: 44rpx; color: #969799; padding: 5rpx"
            @click="visible = false"
          ></text>
        </view>
        <view class="content">
          <text class="title">填写时间</text>
          <UniDatetimePicker
            v-model="daterange"
            type="daterange"
            rangeSeparator="-"
          ></UniDatetimePicker>
          <view class="shortcut-selector">
            <view
              v-for="(item, index) in options"
              :key="index"
              class="shortcut-item"
              :class="{ 'selected-item': isChecked(item.value) }"
              @click="handleClick(item.value)"
            >
              {{ item.lable }}
            </view>
          </view>
        </view>
        <TButtonGroup position="fixed" :styles="{ gap: '24rpx' }">
          <TButton
            text="重置"
            type="none"
            :customStyle="{ width: '331rpx', borderRadius: '44rpx', border: '1px solid #CCCCC8' }"
            @click="handleReset"
          />
          <TButton
            text="筛选"
            type="primary"
            :customStyle="{ width: '331rpx', borderRadius: '44rpx' }"
            @click="handleSearch"
          />
        </TButtonGroup>
      </view>
    </TuiDrawer>
  </view>
</template>

<script lang="ts" setup>
  import TSearch from '@/components/TSearch/index.vue';
  import TuiDrawer from '@/components/TuiDrawer/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import UniDatetimePicker from '@/components/Form/uni_modules/uni-datetime-picker/uni-datetime-picker.vue';
  import dayjs from 'dayjs';

  import { computed, inject, reactive, ref, watch, type Ref } from 'vue';

  defineProps({
    text: { type: String, default: '搜索' },
  });

  const emits = defineEmits(['confirm']);
  const openDrawer = inject<Ref<boolean>>('openDrawer');

  const visible = ref<boolean>(false);
  watch(
    () => visible.value,
    (val) => {
      try {
        openDrawer!.value = val;
      } catch (error) {}
    },
  );
  const keyWord = ref('');

  const daterange = ref<string[]>([]);

  const handleConfirm = (val: string) => {
    keyWord.value = val;
    emits('confirm', {
      keyWord: keyWord.value,
      daterange: daterange.value.map((item, index) => {
        if (index === 0) {
          return item + ' 00:00:00';
        }
        return item + ' 23:59:59';
      }),
    });
    visible.value = false;
  };

  const isChecked = (item: string[]) => {
    return item[0] === daterange.value[0] && item[1] === daterange.value[1];
  };

  const options = reactive([
    {
      lable: '不限',
      value: [],
    },
    {
      lable: '最近七天',
      value: computed(() => {
        return [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
      }),
    },
    {
      lable: '最近一个月',
      value: computed(() => {
        return [dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
      }),
    },
  ]);

  const handleClick = (item: string[]) => {
    daterange.value = item;
  };

  const handleReset = () => {
    keyWord.value = '';
    daterange.value = [];
  };

  const handleSearch = () => {
    emits('confirm', {
      keyWord: keyWord.value,
      daterange: daterange.value.map((item, index) => {
        if (index === 0) {
          return item + ' 00:00:00';
        }
        return item + ' 23:59:59';
      }),
    });
    visible.value = false;
  };
</script>

<style lang="scss" scoped>
  .record-search {
    height: 104rpx;
    padding-left: 32rpx;
    background-color: white;
    display: flex;
    align-items: center;
    gap: 32rpx;
    .search {
      flex: 1;
      height: 72rpx;
    }
    .filter-box {
      height: 1000rpx;
      .header {
        height: 96rpx;
        box-shadow: 0px -1px 0px 0px #ebedf0 inset;
        padding-right: 24rpx;
        padding-left: 312rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 32rpx;
          line-height: 44rpx;
        }
      }
      .content {
        padding: 32rpx;
        display: flex;
        flex-direction: column;
        gap: 24rpx;
        .title {
          font-size: 32rpx;
          line-height: 48rpx;
        }
        .shortcut-selector {
          display: flex;
          gap: 24rpx;
          .shortcut-item {
            padding: 12rpx 24rpx;
            background-color: #f2f3f5;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            color: #666664;
            border-radius: 44rpx;
          }
        }
        .selected-item {
          background-color: #2878ff !important;
          color: white !important;
        }
      }
    }
  }
</style>
